import React, { Component } from 'react'
import styles from "./index.module.css"
import FilterTitle from '../FilterTitle'
import FilterPicker from "../FilterPicker"
import { API } from "../../../../utils/api"
import FilterMore from "../FilterMore"

const titleSelectedStatus = {
    area: false,
    mode: false,
    price: false,
    more: false
}
const selectedValues = {
    area: ['area', 'null'],
    mode: ['null'],
    price: ['null'],
    more: []
}
export default class Filter extends Component {
    state = {
        titleSelectedStatus,
        //控制filterPick或者filterMore组件的展示或隐藏
        openType: '',
        filterData: {},
        selectedValues,
        isShow: null,
    }
    componentDidMount() {
        // 获取所有筛选条件  
        this.getFilterData()
        // 获取到body
        this.htmlBody = document.body
    }
    // 获取所有筛选条件
    async getFilterData() {
        const { value } = JSON.parse(localStorage.getItem('hkzf_city'))
        const res = await API.get(`/houses/condition?id=${value}`)
        // console.log(123123, res)
        this.setState({
            filterData: res.data.body
        })
    }
    // 标题每一项的点击事件
    onTitleClick = type => {
        this.htmlBody.className = styles.body_hide
        // 解构出titleSelectedStatus selectedValues
        const { titleSelectedStatus, selectedValues } = this.state
        // 创建新的标题选中状态
        const newTitleSelectedStatus = { ...titleSelectedStatus }

        //遍历标题选中状态
        //Object.keys()=>['area','mode','price','more']
        Object.keys(titleSelectedStatus).forEach(item => {
            if (item === type) {
                //等于当前标题时新的标题选中状态为true
                newTitleSelectedStatus[type] = true
                return
            }
            // 其他标题
            const selectedVal = selectedValues[item]
            if (item === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
                // 高亮
                newTitleSelectedStatus[item] = true
            } else if (item === 'mode' && selectedVal[0] !== 'null') {
                // 高亮
                newTitleSelectedStatus[item] = true
            } else if (item === 'price' && selectedVal[0] !== 'null') {
                // 高亮
                newTitleSelectedStatus[item] = true
            } else if (item === 'more' && selectedVal.length !== 0) {
                //更多选择
                // 高亮
                newTitleSelectedStatus[item] = true
            } else {
                newTitleSelectedStatus[item] = false
            }
        })
        // console.log(newTitleSelectedStatus)
        // this.setState函数写法
        this.setState({
            titleSelectedStatus: newTitleSelectedStatus,
            openType: type
        })
    }
    // 取消隐藏对话框
    onCancel = (type) => {
        this.htmlBody.className = ''
        const { titleSelectedStatus, selectedValues } = this.state
        // 创建新的标题选中状态
        const newTitleSelectedStatus = { ...titleSelectedStatus }
        //菜单高亮逻辑处理
        const selectedVal = selectedValues[type]
        if (type === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'mode' && selectedVal[0] !== 'null') {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'price' && selectedVal[0] !== 'null') {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'more' && selectedVal.length !== 0) {
            //更多选择
            // 高亮
            newTitleSelectedStatus[type] = true
        } else {
            newTitleSelectedStatus[type] = false
        }
        this.setState({
            titleSelectedStatus: newTitleSelectedStatus,
            openType: ''
        })
    }
    // 确定按钮事件函数
    onEnter = (type, value) => {
        this.htmlBody.className = ''
        console.log(type, value)
        // 解构出titleSelectedStatus selectedValues
        const { titleSelectedStatus } = this.state
        // 创建新的标题选中状态
        const newTitleSelectedStatus = { ...titleSelectedStatus }
        //菜单高亮逻辑处理
        const selectedVal = value
        if (type === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'mode' && selectedVal[0] !== 'null') {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'price' && selectedVal[0] !== 'null') {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'more' && selectedVal.length !== 0) {
            //更多选择
            // 高亮
            newTitleSelectedStatus[type] = true
        } else {
            newTitleSelectedStatus[type] = false
        }
        const newSelectedValues = {
            ...this.state.selectedValues,
            //只更新当前type对应的选中值
            [type]: value
        }
        const { area, mode, price, more } = newSelectedValues
        // 筛选条件数据
        const filters = {}
        // 区域数据
        const areaKey = area[0]
        let areaValue = 'null'
        if (area.length === 3) {
            areaValue = area[2] !== 'null' ? area[2] : area[1]
        }

        filters[areaKey] = areaValue
        // 方式和租金
        filters.mode = mode[0]
        filters.price = price[0]
        // 更多筛选条件
        filters.more = more.join(',')
        // console.log(filters)
        // 接受父组件的onFilter方法，把筛选条件作为参数传递过去
        this.props.onFilter(filters)

        this.setState({
            titleSelectedStatus: newTitleSelectedStatus,
            selectedValues: newSelectedValues,
            openType: ''
        })
        window.scrollTo(0, 0)
        // API.get
    }

    // 渲染filterpicker组件
    renderFilterPicker() {
        const { openType, selectedValues, filterData: { area, subway, rentType, price } } = this.state
        if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
            return null
        }
        // 根据openType来拿到当前筛选条件数据
        let data = []
        let cols = 3
        let defaultValue = selectedValues[openType]

        switch (openType) {
            case 'area':
                // 区数据
                data = [area, subway]
                cols = 3
                break;
            case 'mode':
                // 区数据
                data = rentType
                cols = 1
                break;
            case 'price':
                // 区数据
                data = price
                cols = 1
                break;
            default:
                break;
        }
        return (
            <FilterPicker
                key={openType} //组件加了key之后不用每次都销毁重建 可以根据key来切换同内容的相同组件
                onCancel={this.onCancel}
                onEnter={this.onEnter}
                data={data} cols={cols}
                type={openType}
                defaultValue={defaultValue}
            />
        )
    }
    //渲染filterMore组件
    renderFilterMore() {
        const { openType, filterData: { roomType, oriented, floor, characteristic }, selectedValues } = this.state
        if (openType !== 'more') {
            return null
        }
        const data = {
            roomType, oriented, floor, characteristic
        }
        const defaultValue = selectedValues.more
        return (
            <FilterMore data={data} onCancel={this.onCancel} type={openType} onEnter={this.onEnter} defaultValue={defaultValue} />
        )
    }
    render() {
        const { titleSelectedStatus, openType } = this.state
        return (
            <div className={styles.filter}>
                {/* 遮罩 */}
                {openType === 'area' || openType === 'mode' || openType === 'price' ||openType === 'more' ? <div className={styles.mask}></div> : null}

                <div className={styles.content}>
                    <FilterTitle titleSelectedStatus={titleSelectedStatus} onClick={this.onTitleClick} />
                    {this.renderFilterPicker()}
                    {this.renderFilterMore()}
                </div>
            </div>
        )
    }
}
